<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>会员卡转移</title>
	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="/pc/css/animate.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
	<script src="/pc/js/ripplet.js"></script>
</head>
<style>
	body{margin: 0;padding: 0;background: #75C1B5}
	.header{
		width: 90%;
		margin: 0 auto;
		padding: 30px 0;
	}
	.header-right{
		float: right;
		color: #C1E1DB
	}
	.header-right-btn{
		font-size:16px;
		float: right;
		margin-left: 20px;
		cursor: pointer;
		transition: all .5s;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:no
	}
	.header-right-btn a{
		color:#C1E1DB;
	}
	.header-right-btn a:hover{
		color: #fff;
		text-decoration: none;
	}
	.header-right-btn a:active{
		color: #C1E1DB
	}
	.header-right-btn i{
		margin-right: 5px
	}
	.center{
		width: 85%;
		margin:0 auto;
		overflow: hidden;
	}
	.center-logo{
		width: 100%;
		overflow: hidden;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:no
	}
	.center-logo-img{
		width: 70px;
		height: 70px;
		float: left;
	}
	.center-logo-img img{
		width: 100%;
		border-radius: 10px;
	}
	.center-logo-text{
		float: left;
		line-height: 70px;
		margin-left: 10px;
		font-size: 25px;
		color: #fff;
	}
	.center-main{
		width: 60%;
		margin:130px auto 0;
	}
	.center-main-title{
	    font-size: 21px;
	    color: #E0EEEB;
		padding: 15px;
		box-sizing: border-box;
		overflow: hidden;
		line-height: 30px;
	}
	.center-main-title-text{
		float: left;
	}
	/*下载模板按钮*/
	.center-main-title-download{
		background: #6EBAAE;
		color: #C1E1DB;
		margin-left: 20px;
		font-size: 12px;
		/*line-height: 20px;*/
		display: block;
		float: left;
		padding: 0 8px;
		border-radius: 5px;
	}
	.center-main-title-download:hover{
		color: #C1E1DB;
		text-decoration: none;
	}
	.center-main-file{
		width: 100%;
		overflow: hidden;
		margin: 20px 0 0 0;
		padding: 15px;
	}
	.center-main-file-choose{
	    width: 65%;
	    background: #DEF1EF;
	    font-size: 20px;
	    color: #75C1B5;
	    border-radius: 10px;
	    border: none;
	    outline: none;
	    text-align: center;
	    float: left;
	    padding: 18px 0;
	    cursor: pointer;
	    position: relative;
	}
	/*进度条*/
	.center-main-file-choose-loadingBarber{
		position: absolute;
		top: 0;
		left: 0;
		background:  #fff;
		width: 0;
		padding: 18px 0;
	    border-radius: 10px;
	}
	.center-main-file-upload{
		width: 22%;
	    background: #FFFFFF;
	    font-size: 20px;
	    color: #75C1B5;
	    padding: 18px 0;
	    border-radius: 10px;
	    border: none;
	    outline: none;
	    float: left;
	    text-align: center;
	    margin-left: 10px;
	    cursor: pointer;
	    transition: all .5s;
	}
	/*.center-main-file-upload:hover{
		background: #E0EEEB
	}*/
	.center-main-btnGroup{
		overflow: hidden;
		padding: 15px;
		text-align: center;
	}
	.center-main-btnGroup-btn{
		width: 18%;
	    background: #6EBAAE;
	    font-size: 16px;
	    color: #C1E1DB;
	    padding: 11px 0;
	    border-radius: 8px;
	    border: none;
	    outline: none;
		float: left;
		margin:0 10px 0 0;
		cursor: pointer;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:no
	}
	.center-main-footer{
	   	margin: 80px 8px 0;
	}
    .center-main-footer p{
    	padding: 0 15px;
    	font-size: 15px;
	    color: #C1E1DB;
    }
    .hidden{display: none}
    .history{display: none}
    .history,.uploading{
    	position: fixed;
    	width: 50%;
    	height: 80vh;
    	left: 50%;
    	margin-left: -25%;
    	background: #fff;
    	top: 50vh;
    	margin-top: -40vh;
    	/*display: none;*/
    }
    .history-top,.uploading-top{
    	width: 100%;
    	overflow: hidden;
    	padding: 5px;
    	box-sizing: border-box;
    	color: #929192;
    }
    .history-top-title{
    	float: left;
    }
    .history-top-exit,.uploading-top-exit{
		float: right;
		padding: 0 10px 0 0;
		transition: all .5s;
		color:#929192;
    }
    .history-top-exit i,.uploading-top-exit i{transition: all .3s;cursor: pointer;}
    .history-top-exit i:hover,.uploading-top-exit i:hover{
    	transform:rotate(45deg);
    }
    .history-list,.uploading-list{
    	padding: 20px;
    	margin: 0;
    	list-style: none;
    	width: 100%;
		overflow: scroll;
		height: 70vh;
    }
    .history-list-item,.uploading-list-item{
    	display: flex;
    	text-align: center;
    	justify-content: center;
    	font-size: 14px;
    	color:#929192;
    	margin: 5px 0;
    }
    .history-list-item-id,.uploading-list-item-id{
    	flex: 1;
    }
    .history-list-item-name,.uploading-list-item-name{
    	flex: 2;
    }
    .history-list-item-phone,.uploading-list-item-phone{
    	flex: 4;
    }
    .history-list-item-time,.uploading-list-item-time{
    	flex: 4;
    }
    .history-list-item-status,.uploading-list-item-status{
    	flex: 3;
    }
    .history-bottom,.uploading-bottom{
    	position: absolute;
    	bottom: 0;
    	height: 20px;
    	width: 100%;
    }
    .uploading {display: none;}
    .uploading iframe{width: 100%;height: 70vh;overflow: scroll;}
	#choose_list{
		position: relative;
		min-width: 150px;
	}
	.store_list{
		position: absolute;
		top: 40px;
		padding: 0;
		text-align: center;
		list-style: none;
		border-radius: 10px;
		height: 0;
		overflow: hidden;
		transition: all 1s ;
	}
	.store_list li{
		background: #DEF1EF;
		color: #75C1B5;
		padding: 10px 10px;
	}
</style>
<body>
	<div class="header">
		<div class="header-right">
			<div class="header-right-btn">
				<a href="/pc/logout"><i class="fa fa-power-off"></i>退出登录</a>
			</div>
			<div class="header-right-btn" id="choose_list">
				<i class="fa fa-user-o"></i>{{$store_name}}
				<i class="fa fa-sort-down"></i>
				<ul class="store_list">
					@foreach($store_list as $key=>$sort)
						<li hx-store-id = "{{encrypt($sort->store->id)}}">{{$sort->store->name}}</li>
					@endforeach
				</ul>
			</div>
		</div>
	</div>
	<div class="center">
		<div class="center-logo">
			<div class="center-logo-img">
			</div>
			<div class="center-logo-text">
				花县令会员转移
			</div>
		</div>
		<div class="center-main">
			<div class="center-main-title">
				<div class="center-main-title-text">
					请下载表格填入数据后上传
				</div>

				<a href="http://www.tiechuikeji.com/vipcard_tf.xlsx" data-ripple="ripple" class="center-main-title-download" onmousedown="ripplet(event, { color: 'rgba(224,238,235,.1)' })">
					下载模板
				</a>
			</div>
			<div class="center-main-file">
				<div data-ripple="ripple" class="center-main-file-choose"  onmousedown="ripplet(event, { color: 'rgba(255,255,235,.4)' })">
					选择文件
					<!-- 进度条 -->
					<div class="center-main-file-choose-loadingBarber">&emsp;</div>
					<!-- /进度条 -->
				</div>
				<div data-ripple="ripple" hua-disable='1' class="center-main-file-upload" onmousedown="ripplet(event, { color: 'rgba(224,238,235,.4)' })">
					上传
				</div>
			</div>
			<div class="center-main-btnGroup">
				<div data-ripple="ripple" id="history_show" class="center-main-btnGroup-btn" onmousedown="ripplet(event, { color: 'rgba(224,238,235,.1)' })">
					转移记录
				</div>

			</div>
			<div class="center-main-footer">
				<p>转移方法2：用APP转移功能</p>
				<p>特点：速度慢，准确率高</p>
			</div>
		</div>
	</div>
	<div class="hidden">
		<input type="file" id="excal">
	</div>

	<div class="history">
		<div class="history-top">
			<div class="history-top-title">
				转移记录
			</div>
			<div class="history-top-exit">
				<i class="fa fa-close"></i>
			</div>
		</div>
		<ul class="history-list">
			@if($history->count()>0)
				@foreach($history as $key=>$sort)
				<li class="history-list-item">
					<div class="history-list-item-id">{{$sort['id']}}</div>
					<div class="history-list-item-name">{{$sort['name']}}</div>
					<div class="history-list-item-phone">{{$sort['phone']}}</div>
					<div class="history-list-item-time">{{$sort['created_at']}}</div>
					@if($sort['status']==0)
						<div class="history-list-item-status" style="color: #d9534f">未领取</div>
					@else
						<div class="history-list-item-status" style="color: #5cb85c">已领取</div>
					@endif

				</li>

				@endforeach
			@else
				暂无数据
			@endif
		</ul>
		<div class="history-bottom">

		</div>
	</div>

	<div class="uploading">
		<div class="uploading-top">
			<div class="uploading-top-exit">
				<i class="fa fa-close"></i>
			</div>
		</div>
		<iframe src="" frameborder="0">
			<ul class="uploading-list">
				<li class="uploading-list-item">
					<div class="uploading-list-item-id">1234</div>
					<div class="uploading-list-item-name">瓦解哦婆婆</div>
					<div class="uploading-list-item-phone">18888888888</div>
					<div class="uploading-list-item-time">2019-04-01 12:12：12</div>
					<div class="uploading-list-item-status">未领取</div>
				</li>
				<li class="uploading-list-item">
					<div class="uploading-list-item-id">1234</div>
					<div class="uploading-list-item-name">瓦解哦婆婆</div>
					<div class="uploading-list-item-phone">18888888888</div>
					<div class="uploading-list-item-time">2019-04-01 12:12：12</div>
					<div class="uploading-list-item-status">未领取</div>
				</li>
			</ul>
		</iframe>
	</f>
</body>
<script>
	//点击选择店铺按钮
	$('#choose_list').click(function () {
		event.stopPropagation();
		$('.store_list').css('height','auto');
		$("div").not("#choose_list").click(function () {
			$('.store_list').css('height','0');
		})

	})
	//选择店铺
	$(".store_list li").click(function (e) {

		event.stopPropagation();
		$('.store_list').css('height','0');
		var store_id = $(e.target).attr('hx-store-id');
		location.href="/pc/index/"+store_id;
	})

	//文件改变时
	$('#excal').change(function(){
		console.log($('#excal').get(0).files[0]['type']);

			$('.center-main-file-choose').text($('#excal').get(0).files[0]['name'])


	})

	//点击选择文件按钮
	$('.center-main-file-choose').click(function(){
		$('#excal').click();

	})


	// 点击上传按钮
	$('.center-main-file-upload').click(function(){
		var btn_disable = $(this).attr('hua-disable');
		//判断按钮点击状态
		if(btn_disable!=0){
			// 判断有无选择文件
			if($('#excal').get(0).files[0]){//选择了
				var formData = new FormData();
                formData.append("excel", document.getElementById("excal").files[0]);
				formData.append("_token",'{{csrf_token()}}');
				formData.append("store_id",'{{$store_id}}');
				$.ajax({
					url:'/pc/excelUpload',
					type:'post',
					data:formData,
					 contentType: false,
                    /**
                    * 必须false才会避开jQuery对 formdata 的默认处理
                    * XMLHttpRequest会对 formdata 进行正确的处理
                    */
                    processData: false,
					success:function(data){
						if(data.status){
							//重置可上传状态
							$('.center-main-file-upload').attr('hua-disable',1);
							$('.center-main-file-upload').html('上传');
							//弹出进度框
							$('.uploading').show();
							$('.uploading').addClass('model-animate');
							console.log('/pc/excelPut/'+data.result.file_name+data.result.store_id);
							$('.uploading iframe').attr('src','/pc/excelPut/'+data.result.file_name+'/'+data.result.store_id);
						}else{
							alert(data.msg);
							//重置可上传状态
							$('.center-main-file-upload').attr('hua-disable',0);
							$('.center-main-file-upload').html('<i class="fa fa-spinner fa-spin"></i>');
						}

					},
					beforeSend:function(){
						//重置可上传状态
						$('.center-main-file-upload').attr('hua-disable',0);
						$('.center-main-file-upload').html('<i class="fa fa-spinner fa-spin"></i>');
					},
					complete:function(){
						//重置可上传状态
						$('.center-main-file-upload').attr('hua-disable',1);
						$('.center-main-file-upload').html('上传');
					},
					error:function(){
						//重置可上传状态
						alert('服务器错误');
						$('.center-main-file-upload').attr('hua-disable',1);
						$('.center-main-file-upload').html('上传');
					}
				})
			}else{//未选择
				$('.center-main-file-choose').text('请先选择文件');
				$('.center-main-file-choose').addClass('shake');
				setTimeout(function(){
					$('.center-main-file-choose').removeClass('shake');
				},500)
			}
		}else{

		}

	})

	// 点击转移记录
	$('#history_show').click(function(){
		$('.history').show();
		$('.history').addClass('model-animate');
		// setTimeout(function(){
		// 	$('.history').removeClass('model-animate');
		// },500)
	})

	// 点击转移记录关闭按钮
	$('.history-top-exit').click(function(){
		$('.history').hide();
		// setTimeout(function(){
		// 	$('.history').removeClass('model-animate');
		// },500)
	})

	// 点击当前转移关闭按钮
	$('.uploading-top-exit').click(function(){
		$('.uploading').hide();
	})


</script>
</html>